html {
  /*
    参考：https://zhuanlan.zhihu.com/p/139652407
    先英后中，保证中英字体兼容到。
    英文字体 Mac 优先使用 Helvetica Neue 这款字体以保证最佳体验，选择了 Arial 作为替代英文字体，Win 选择 Arial；
    中文字体方面 Mac 首选了“苹方”，然后选择了“冬青黑体”及“黑体-简”作为替代方案，Win 选择“微软雅黑”；
    最后使用“文泉驿微米黑” WenQuanYi Micro Hei 兼顾了 Linux 系统；
    最后的最后，选择无衬线字体 sans-serif。
  */
  /*font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;*/
  /* apple.cn */
  font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
  background: rgba(33, 33, 26, 1);
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  /*transition: all 0.3s ease;*/
}
a:hover {
  color: rgb(40, 210, 190) !important;
}
.collapsed { /* 隐藏（不保留布局空间） */
  display: none;
}
.mt16 {
  margin-top: 16px;
}
.mt8 {
  margin-top: 8px;
}
.mb8 {
  margin-bottom: 8px;
}

nav {
  position: fixed;
  z-index: 100; /* 确保顶层 */
  left: 0;
  top: 0;
  width: 100%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); /* 向下偏移2px的阴影，模糊半径3px */
}
.navbar {
  /* flex 布局的基本概念：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox */
  display: flex;
  flex-direction: row; /* flex 布局中子元素水平排列 */
  flex-wrap: nowrap; /* flex 布局中子元素不换行 */
  align-items: center; /* flex 布局中子元素垂直居中 */
  justify-content: flex-start; /* flex 布局中子元素主轴对齐 */
  background-color: rgba(78, 205, 196, 1);
  /*background: linear-gradient(to bottom, rgb(65, 228, 203), rgb(25, 223, 191));*/
  line-height: 1; /* 去除多余行距 */
  white-space: nowrap; /* 不换行 */
  font-size: medium;
  font-weight: normal;
}
.navbar > .navbar-item {
  padding: 16px 6px; /* 高度：48px，随屏幕空间变化 */
  color: rgba(70, 80, 90, 1);
  transition: background-color 0.4s;
}
.navbar > a.navbar-item:hover {
  color: rgba(70, 80, 90, 1) !important;
  background-color: rgba(0, 0, 0, 0.1);
}
.navbar > .navbar-brand, .navbar > .navbar-here {
  font-weight: bold;
  color: black; /* 随屏幕空间变化 */
}
.navbar > .navbar-brand > span {
  display: none; /* 空间不足隐藏副标题，随屏幕空间变化 */
}
.navbar > .navbar-space {
  flex-grow: 1; /* 填充剩余空间 */
}
.navbar > .navbar-more::after {
  content: "…";
}
/*.navbar > .navbar-menu-toggle > i {*/
/*  opacity: 1;*/
/*  transform: translate(0, 0);*/
/*  transition: all 300ms ease-out;*/
/*}*/
/*.navbar > .navbar-more {*/
/*  transition: opacity 0.35s, transform 0.35s;*/
/*  transform: translate3d(20px, 0, 0); !* 用于右侧滑入 *!*/
/*  transition-delay: 1s; !* 延迟1s *!*/
/*  opacity: 0;*/
/*}*/
/*.navbar > .navbar-more-visible {*/
/*  transform: translate3d(0, 0, 0);*/
/*  opacity: 1;*/
/*}*/

section {
  margin-top: 48px; /* TODO: 折去导航栏高度 */
  /*z-index: 99; !* 在导航栏下层 *!*/
}

.logo {
  display: block;
  max-width: 90%;
  height: auto;
  margin: 0 auto; /* 确定 width 的 block 元素，通过 auto 水平居中 */
  padding: 15% 0;
  pointer-events: none; /* 屏蔽鼠标事件 */
}

.toast-mask {
  margin: 0 6px;
}
.toast {
  color: white;
}
.toast-info {
  color: rgb(40, 210, 190)!important;
}
.toast-error {
  color: rgb(244, 67, 54) !important;
}
.toast a.action {
  color: white;
}

.image-list {
  /* flex 布局的基本概念：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 3px; /* 上边下边 | 左边右边 */
}
.image-list figure {
  flex-grow: 0; /* 禁用，避免最后一行不满时放大，而是通过 flex-basis 控制好自适应宽度 */
  flex-shrink: 1;
  flex-basis: calc(100% / 2 - 6px); /* 241~300px */
  margin: 3px; /* 重置 figure 元素边距，flex-basis 不包含该 margin */
  position: relative;
}
.image-list figure::before {
  content: "";
  display: block;
  padding-top: 57.5%;
}
.image-list figure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}
.image-list figure figcaption { /* 星标（默认隐藏） */
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px 0; /* 左右0边距，通过内容空格控制 */
  /*pointer-events: none;*/
  width: 100%; /* 限制内容宽度不超出封面图片区域，并减去右边距避免超出 */
  overflow: hidden; /* 保证超出宽度时 text-overflow: ellipsis 能生效 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
  /*word-break: break-word;*/
  color: white;
  font-size: small;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
  /* 参考：https://tympanus.net/Development/HoverEffectIdeas/index2.html */
  transition: opacity 0.35s, transform 0.35s;
}
.image-list figure figcaption a {
  color: white;
}
.image-list figure .fade {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
 }
.image-list figure:hover .fade { /* 鼠标悬停显示星标 */
  opacity: 1;
  transform: translate3d(0, 0, 0);
 }

.list-label { /* 左右边距与下边距与 figcaption 一致（包括内容空格） */
  padding: 12px 6px 5px; /* 上边 | 左边右边 | 下边 */
  color: white;
  font-size: small;
}

.copyright {
  text-align: center;
  padding: 16px 6px;
}
.copyright small, .copyright a {
  color: rgba(102, 102, 102, 1);
}

@media screen and (min-width: 500px) {
  /* 手机竖屏几乎不超过500，超过500视为桌面浏览器，适当调宽导航栏文字间隔 */
  /* OnePlus 8：424、iPhone 13 mini：375 */
  .navbar > .navbar-item { /* 空间足够时调大导航栏文字间隔 */
    padding: 16px 8px; /* 高度：48px */
  }
}

@media screen and (min-width: 830px) { /* 3列，阈值：(400+3+3)*2=806+3+3+18=830 */
  .image-list figure {
    flex-basis: calc(100% / 3 - 6px); /* 269~400px */
  }
  .navbar > .navbar-item { /* 空间足够时调大导航栏文字间隔 */
    padding: 11px 16px; /* 高度：38px */
  }
  .navbar > .navbar-brand, .navbar > .navbar-here { /* 空间足够时调整高亮色 */
    color: rgba(70, 80, 90, 1);
  }
  .navbar > .navbar-brand > span:nth-child(1) { /* 空间足够时显示短副标题 */
    display: inline-block;
  }
  .navbar > .navbar-sort { /* 空间足够时始终全部排序项 */
    display: block;
  }
  .navbar > .navbar-menu { /* 空间足够时始终显示全部菜单项 */
    display: block;
  }
  .navbar > .navbar-menu-toggle { /* 空间足够时始终隐藏菜单开关按钮 */
    display: none;
  }
  section {
    margin-top: 38px; /* TODO: 折去导航栏高度 */
  }
}
@media screen and (min-width: 1242px) { /* 4列，阈值：(400+3+3)*3=1218+3+3+18=1242 */
  .image-list figure {
    flex-basis: calc(100% / 4 - 6px); /* 305~400px */
  }
  .navbar > .navbar-brand > span:nth-child(2) { /* 空间足够时显示长副标题 */
    display: inline-block;
  }
  .navbar > .navbar-brand > span:nth-child(1) {
    display: none;
  }
}
@media screen and (min-width: 1648px) { /* 5列，阈值：(400+3+3)*4=1624+3+3+18=1648 */
  .image-list figure {
    flex-basis: calc(100% / 5 - 6px); /* 325~400px */
  }
}
@media screen and (min-width: 2054px) { /* 6列，阈值：(400+3+3)*5=2030+3+3+18=2054 */
  .image-list figure {
    flex-basis: calc(100% / 6 - 6px); /* 339~400px */
  }
}
@media screen and (min-width: 2460px) { /* 7列，阈值：(400+3+3)*6=2436+3+3+18=2460 */
  .image-list figure {
    flex-basis: calc(100% / 7 - 6px); /* 348~400px */
  }
}
@media screen and (min-width: 2866px) { /* 8列，阈值：(400+3+3)*7=2842+3+3+18=2866 */
  .image-list figure {
    flex-basis: calc(100% / 7 - 6px); /* 356~400px */
  }
}